import { View } from '@tarojs/components';
import { FC } from 'react';
import { Picker } from '@/components';
import { MONTH_FORMAT } from '@/constants';
import './index.scss';

const PREFIX_CLS = 'm-month-select';

interface MonthSelectProps {
  value?: string;
  onChange?: (value: string) => void;
  onVisibleChange?: (visible: boolean) => void;
  onPopupOpen?: () => void;
  onPopupClose?: () => void;
}

const MonthSelect: FC<MonthSelectProps> = ({
  value,
  onChange,
  onVisibleChange,
  onPopupOpen,
  onPopupClose,
}) => {
  return (
    <View className={PREFIX_CLS}>
      <Picker.Date
        type="year-month"
        value={value}
        onVisibleChange={onVisibleChange}
        onPopupOpen={onPopupOpen}
        onPopupClose={onPopupClose}
        pickerViewProps={{
          arrowType: 'bottom',
        }}
        clearable={false}
        onConfirm={(_, v) => {
          onChange?.(v.format(MONTH_FORMAT));
        }}
      />
    </View>
  );
};

export default MonthSelect;
